import React, { Component } from 'react';
import { Collapse, Button, Icon, Radio } from 'antd';
import './ui.less';

const Panel = Collapse.Panel;
const ButtonGroup = Button.Group;

export default class Buttons extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      size: 'default'
    };
  }

  showLoading = () => {
    return this.setState({ loading: true });
  };

  closeLoading() {
    return this.setState({ loading: false });
  }

  handleChange = e => this.setState({ size: e.target.value });

  render() {
    return (
      <div>
        <Collapse defaultActiveKey={['1', '2', '3', '4', '5']}>
          <Panel header="基础按钮" key="1" className="button-wrap">
            <Button>Default</Button>
            <Button type="primary">Primary</Button>
            <Button type="dashed">dashed</Button>
            <Button type="danger">danger</Button>
            <Button disabled>disabled</Button>
          </Panel>
          <Panel header="图形按钮" key="2" className="button-wrap">
            <Button icon="download">download</Button>
            <Button type="primary" icon="search" shape="circle" />
            <Button type="danger" icon="delete" size="large" />
          </Panel>
          <Panel header="Loading按钮" key="3" className="button-wrap">
            <Button loading={this.state.loading} onClick={this.showLoading}>
              Loading
            </Button>
            <Button
              type="primary"
              icon="search"
              shape="circle"
              loading={this.state.loading}
              onClick={this.showLoading}
            />
            <Button type="primary" onClick={() => this.closeLoading()}>
              关闭
            </Button>
          </Panel>
          <Panel header="按钮组" key="4">
            <ButtonGroup>
              <Button style={{ marginRight: 0 }}>
                <Icon type="left" />
                前进
              </Button>
              <Button type="primary">
                <Icon type="right" />
                后退
              </Button>
            </ButtonGroup>
          </Panel>
          <Panel header="大小" key="5" className="button-wrap">
            <Button type="primary">中 default</Button>
            <Button type="primary" size="small">
              小 small
            </Button>
            <Button type="primary" size="large">
              大 large
            </Button>
            <Radio.Group value={this.state.size} onChange={this.handleChange}>
              <Radio value="small">小</Radio>
              <Radio value="default">中</Radio>
              <Radio value="large">大</Radio>
            </Radio.Group>
            <Button type="primary" size={this.state.size}>
              中 default
            </Button>
            <Button type="primary" size={this.state.size}>
              小 small
            </Button>
            <Button type="primary" size={this.state.size}>
              大 large
            </Button>
          </Panel>
        </Collapse>
      </div>
    );
  }
}
